<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar :background="background">
			<view class="ft_16 fw-b">申请入驻</view>
		</u-navbar>
		<view class="content p_top_10">
			<view class="display just_space card">
				<view class="">
					入驻身份
				</view>
				<view>{{type==0?'体彩店':type==1?'门店店长':'经销商'}}</view>
			</view>
			<view class="card" style="padding: 0 15px;">
				<view class="display just_space bor_bottom" style="padding: 10px 0;" v-if="type!=2">
					<view class="">
						{{type==0?'站点号':'经销商id'}}
					</view>
					<u-input type="number" maxlength="10" v-model="ruzhuInfo.zhandainNum" placeholder="请填写" input-align="right"/>
				</view>
				<view class="display just_space" style="padding: 18px 0;" @click="show2=true" v-if="type!=0">
					<view class="">
						渠道
					</view>
					<view class="display ">
						<view class="p_right_10 c-999">{{qdtitle}}</view>
						<u-icon name="arrow-right" color="#dddddd" size="26" style="padding-top: 5rpx;"></u-icon>
					</view>
				</view>
			</view>
			
			
			<view class="card" style="padding: 0 15px;">
				<view class="display just_space bor_bottom" style="height: 60px;">
					<view class="">姓名</view>
					<u-input type="text" v-model="ruzhuInfo.name" placeholder="请填写" input-align="right"/>
				</view>
				<view class="display just_space bor_bottom" style="height: 60px;">
					<view class="">手机号</view>
					<u-input type="number" v-model="ruzhuInfo.phone" maxlength="11" placeholder="请填写" input-align="right" />
				</view>
				<view class="display just_space bor_bottom" style="height: 60px;">
					<view class="">身份证号</view>
					<u-input type="text" v-model="ruzhuInfo.idCard" placeholder="请填写" input-align="right" maxlength='18'/>
				</view>
				
			</view>
			
			<view class="card" style="padding: 0 15px;">
				<view class="display bor_bottom just_space" style="height: 60px;">
					<view class="">地址</view>
					<view class="display " @click="show=true">
						<view class="p_right_10 c-999">{{ruzhuInfo.aegion}}</view>
						<u-icon name="arrow-right" color="#dddddd" size="26" style="padding-top: 5rpx;"></u-icon>
					</view>
				</view>
				<view class="" style="padding: 20px 0;">
					<view class="">
						详细地址
					</view>
					<u-input v-model="ruzhuInfo.address" type="textarea" height="150" :auto-height="true" placeholder="请填写"/>
				</view>
			</view>
			
			<!-- 体彩店照片 -->
			<view class="" v-if="type==0">
				<view class="card uploadImg">
					<view class="p_bottom_10">
						上传门头照
					</view>
					<view class="display" style="flex-flow: wrap;">
						<view class="addimg" @click="addImg" v-if="!ruzhuInfo.mentouImg">
							<u-icon name="plus" color="#ffffff" size="60"></u-icon>
						</view>
						<image :src="ruzhuInfo.mentouImg" mode="aspectFill" v-else @click="$all.preview1(ruzhuInfo.mentouImg)"></image>
					</view>
				</view>
				<view class="card uploadImg">
					<view class="p_bottom_10">
						上传代销证照片
					</view>
					<view class="display" style="flex-flow: wrap;">
						<view class="addimg" @click="addImg1" v-if="!ruzhuInfo.shouquanImg">
							<u-icon name="plus" color="#ffffff" size="60"></u-icon>
						</view>
						<image :src="ruzhuInfo.shouquanImg" mode="aspectFill" v-else @click="$all.preview1(ruzhuInfo.shouquanImg)"></image>
					</view>
				</view>
			</view>
			<!-- 门店店长&&经销商 -->
			<view class="card uploadImg" v-else>
				<view class="p_bottom_10">
					上传营业执照
				</view>
				<view class="display" style="flex-flow: wrap;">
					<view class="addimg" @click="addImg2" v-if="!ruzhuInfo.zhizhaoImg">
						<u-icon name="plus" color="#ffffff" size="60"></u-icon>
					</view>
					<image :src="ruzhuInfo.zhizhaoImg" mode="aspectFill" v-else @click="$all.preview1(ruzhuInfo.zhizhaoImg)"></image>
				</view>
			</view>
			
			<view class="addBtn" @tap="submitApply">
				提交申请
			</view>
		</view>
		
		<!-- 选择渠道 -->
		<u-action-sheet :list="list" @click="selectClick" v-model="show2"></u-action-sheet>
		<!-- 选择地区 -->
		<u-picker mode="region" v-model="show" :area-code='["13", "1303", "130304"]' @confirm="select_address"></u-picker>
		<!-- 提交成功 -->
		<u-popup v-model="show1" mode="center" border-radius="14" :mask-close-able="false">
			<view class="subSuccess">
				<view class="ft_16 fw-b">
					提交审核成功
				</view>
				<view class="c-666">
					我们将在1-3个工作日联系您
				</view>
				<view class="confirm" @click="subBack">
					确定
				</view>
			</view>
		
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',}, //导航栏背景
				list:[{
					name:"阿达"
				}], //渠道
				qdtitle:"请选择渠道", //渠道名
				qudaoID:"", //渠道id
				ruzhuInfo:{ //入驻信息
					zhandainNum:"",
					name:"",
					phone:"",
					idCard:"",
					address:'', //详细地址
					aegion:"选择/定位", //地区
					province_name:"", //省
					city_name:"", //市
					district_name:"", //区
					mentouImg:"", //门头照
					shouquanImg:"", //授权照片
					zhizhaoImg:"",//门店营业执照
				},
				
				show:false, //选择地址
				type:0, // 0/1/2  体彩店/门店店长/经销商
				
				show1:false, //提交成功
				show2:false, //选择渠道
				
			}
		},
		onLoad(e) {
			if(e.type){
				this.type=e.type
			}
			this.getqudao() //获取渠道
		},
		methods: {
			getqudao(){ //获取渠道
				this.$myRequest('personal/channel',{})
				.then(res=>{
					console.log(res.data.data.channel);
					if(res.data.code==1){
						this.list=res.data.data.channel
						this.list.forEach(i=>{
							i.text=i.name
						})
						console.log(this.list);
					}
				})
			},
			selectClick(e){ //选中渠道
				console.log(this.list[e].id);
				this.qdtitle=this.list[e].text
				this.qudaoID=this.list[e].id
			},
			select_address(e){ //选择省市区
				console.log(e.province.label);
				console.log(e.city.label);
				console.log(e.area.label);
				this.ruzhuInfo.province_name=e.province.label  //省市区
				this.ruzhuInfo.city_name=e.city.label
				this.ruzhuInfo.district_name=e.area.label
				this.ruzhuInfo.aegion=e.province.label+e.city.label+e.area.label
			},
			addImg(){ //选择门头照
				uni.chooseImage({
					count: 1,
					success: chooseImageRes => {
						this.ruzhuInfo.mentouImg=chooseImageRes.tempFilePaths[0]
						console.log(this.ruzhuInfo.mentouImg)
						uni.showLoading()
						uni.uploadFile({
							url: getApp().globalData.domainName + 'common/upload',
							filePath: this.ruzhuInfo.mentouImg,
							name: 'file',
							success: (res2) => {
								console.log(JSON.parse(res2.data))
								if(JSON.parse(res2.data)){
									uni.hideLoading()
									this.ruzhuInfo.mentouImg=JSON.parse(res2.data).data.fullurl
								}
							}
						})
					}
				});
			},
			addImg1(){ //选择授权照片
				uni.chooseImage({
					count: 1,
					success: chooseImageRes => {
						this.ruzhuInfo.shouquanImg=chooseImageRes.tempFilePaths[0]
						console.log(this.ruzhuInfo.shouquanImg)
						uni.showLoading()
						uni.uploadFile({
							url: getApp().globalData.domainName + 'common/upload',
							filePath: this.ruzhuInfo.shouquanImg,
							name: 'file',
							success: (res2) => {
								console.log(JSON.parse(res2.data))
								if(JSON.parse(res2.data)){
									uni.hideLoading()
									this.ruzhuInfo.shouquanImg=JSON.parse(res2.data).data.fullurl
								}
							}
						})
					}
				});
			},
			addImg2(){ //选择营业执照
				uni.chooseImage({
					count: 1,
					success: chooseImageRes => {
						this.ruzhuInfo.zhizhaoImg=chooseImageRes.tempFilePaths[0]
						console.log(this.ruzhuInfo.zhizhaoImg)
						uni.showLoading()
						uni.uploadFile({
							url: getApp().globalData.domainName + 'common/upload',
							filePath: this.ruzhuInfo.zhizhaoImg,
							name: 'file',
							success: (res2) => {
								console.log(JSON.parse(res2.data))
								if(JSON.parse(res2.data)){
									uni.hideLoading()
									this.ruzhuInfo.zhizhaoImg=JSON.parse(res2.data).data.fullurl
								}
							}
						})
					}
				});
			},
			
			subBack(){ //提交成功  返回
				uni.navigateBack()
			}, 
			submitApply(){ //提交入驻信息
				if(!this.$all.checkPhone(this.ruzhuInfo.phone)) return
				if(!this.$all.checkidnum(this.ruzhuInfo.idCard)) return
				if(this.type==0){ //体彩店入驻
					this.ticaiRuzhu()
				}else if(this.type==1){ //门店入驻
					this.mendianRuzhu()
				}else{ //经销商入驻
					this.jingxiaoshangRuzhu()
				}
			},
			ticaiRuzhu(){ //体彩店入驻
				let ruzhuInfo=this.ruzhuInfo
				if(ruzhuInfo.zhandainNum.length<10){
					this.$all.toast('站点号为10位数字！')
					return
				}
				let datainfo={
					// channel_id:this.qudaoID, //渠道id
					username:ruzhuInfo.name, //姓名
					mobile:ruzhuInfo.phone, //手机号
					idnum:ruzhuInfo.idCard, //身份证
					address:ruzhuInfo.address,  //详细地址
					province_name:ruzhuInfo.province_name, //省 
					city_name:ruzhuInfo.city_name, //市
					district_name:ruzhuInfo.district_name, //区
					storefront_image:ruzhuInfo.mentouImg, //门头照
					empower_image:ruzhuInfo.shouquanImg, //授权照片
					site:ruzhuInfo.zhandainNum,  //站点号
				}
				console.log(datainfo);
				for(let i in datainfo){
					if(datainfo[i]==''){
						this.$all.toast('请检查是否漏填信息！')
						return
					}
				}
				this.$myRequest('personal/bodycolor',datainfo)
				.then(res=>{
					console.log(res.data);
					if(res.data.code==1){
						this.show1=true //提交成功
					}else{
						this.$all.toast(res.data.msg)
					}
				})
			},
			mendianRuzhu(){ //门店入驻
				let ruzhuInfo=this.ruzhuInfo
				let datainfo={
					channel_id:this.qudaoID, //渠道id
					username:ruzhuInfo.name, //姓名
					mobile:ruzhuInfo.phone, //手机号
					idnum:ruzhuInfo.idCard, //身份证
					address:ruzhuInfo.address,  //详细地址
					province_name:ruzhuInfo.province_name, //省 
					city_name:ruzhuInfo.city_name, //市
					district_name:ruzhuInfo.district_name, //区
					image:ruzhuInfo.zhizhaoImg, //营业执照照片
					di_id:ruzhuInfo.zhandainNum,  //经销商id
				}
				console.log(datainfo);
				for(let i in datainfo){
					if(datainfo[i]==''){
						this.$all.toast('请检查是否漏填信息！')
						return
					}
				}
				this.$myRequest('personal/store',datainfo)
				.then(res=>{
					console.log(res.data);
					if(res.data.code==1){
						this.show1=true //提交成功
					}else{
						this.$all.toast(res.data.msg)
					}
				})
			},
			jingxiaoshangRuzhu(){ //经销商入驻
				let ruzhuInfo=this.ruzhuInfo
				let datainfo={
					channel_id:this.qudaoID, //渠道id
					username:ruzhuInfo.name, //姓名
					mobile:ruzhuInfo.phone, //手机号
					idnum:ruzhuInfo.idCard, //身份证
					address:ruzhuInfo.address,  //详细地址
					province_name:ruzhuInfo.province_name, //省 
					city_name:ruzhuInfo.city_name, //市
					district_name:ruzhuInfo.district_name, //区
					image:ruzhuInfo.zhizhaoImg, //营业执照照片
				}
				for(let i in datainfo){
					if(datainfo[i]==''){
						this.$all.toast('请检查是否漏填信息！')
						return
					}
				}
				console.log(datainfo);
				this.$myRequest('personal/distributor',datainfo)
				.then(res=>{
					console.log(res.data);
					if(res.data.code==1){
						this.show1=true //提交成功
					}else{
						this.$all.toast(res.data.msg)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f7f7f7;
}
.bor_bottom{
	border-bottom: 1px solid #eeeeee;
}
.content{
	.card{
		background-color: #FFFFFF;padding: 15px;
		margin-bottom: 10px;
	}
	.uploadImg{
		image{
			width: 100px;
			height: 100px;
			border-radius: 10px;
		}
		.addimg{
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			border-radius: 10px;
			background-color: #f2f2f2;
		}
	}
	
	.addBtn{
		color: #FFFFFF;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);border-radius:30px;margin:40px 20px;padding: 15px 0;text-align: center;
	}
}

.subSuccess{ //提交成功弹窗
	text-align: center;line-height: 2.7em;padding: 20px 30px;
	.confirm{
		background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);color: #FFFFFF;border-radius: 30px;text-align: center;margin: 0 30px;
	}
}

</style>
